<!--
   项目实施
-->
<template>
  <el-container class="impose-container">
    <el-header height="auto">
      <ProcessPanel
        :key="'impose'"
        :active-button="defaultCode"
        active-panel-name="impose"
        :show-header="true"
        @click="changeProcess"
      >
        <el-row class="impose-header-row">
          <el-col :span="4">
            <el-input v-model="searchValue" :disabled="showGatt" size="mini" class="border">
              <i slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-col>
          <el-col :span="12" :offset="8" style="text-align: right">
            <pure-button :label="btnText" size="mini" @click="cutaway" />
          </el-col>
        </el-row>
      </ProcessPanel>
    </el-header>
    <el-main class="impose-main">
      <MainTable v-show="!showGatt" ref="main" :code="perocessCode " :search-val="searchValue" />
      <GanttTable v-show="showGatt" ref="gantt" :code="perocessCode" />
    </el-main>
  </el-container>
</template>

<script>
import { mapActions, } from 'vuex';
import GanttTable from './components/ganttTable.vue';
import MainTable from './components/mainTable.vue';
import ProcessPanel from '@/views/project/components/navigationPanel/processPanel.vue';

export default {
  name: 'XmWdxm',
  components: {
    GanttTable,
    MainTable,
    ProcessPanel,
  },
  data() {
    return {
      btnText: '切换甘特图',
      showGatt: false,
      defaultCode: 'implStart',
      perocessCode: 'implStart',
      searchValue: '',
    };
  },
  computed: {},
  watch: {},
  activated() {
    this.DISPATCHT_GET_USER_LIST();
    this.$nextTick(() => {
      if (this.showGatt) {
        this.$refs['gantt'].getList(this.perocessCode);
      } else {
        // this.$refs['main'].getList(this.perocessCode);
      }
    });
  },
  mounted() {
    this.DISPATCHT_GET_USER_LIST();
  },

  methods: {
    ...mapActions('user/center', ['DISPATCHT_GET_USER_LIST']),

    changeProcess(code) {
      this.perocessCode = code;
      if (this.showGatt) {
        this.$refs['gantt'].setCode(code);
      } else {
        this.$refs['main'].getList(code);
      }
    },
    cutaway() {
      this.showGatt = !this.showGatt;
      this.btnText = this.showGatt ? '切换表格' : '切换甘特图';
      if (this.showGatt) {
        this.$refs['gantt'].getList(this.perocessCode);
      } else {
        this.$refs['main'].getList(this.perocessCode);
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.impose {
  &-header {
    &-row {
      line-height: 60px;
      height: 60px;
      min-height: 60px;
      padding: 0 16px;
    }
  }
  &-container {
    background: rgb(255, 255, 255);
  }
  // &-main {
  //   padding: 0 16px;
  // }
}
</style>
